<html>
    <head>
        <title>需要遵守的规则</title>
    </head>
    <body>
        <script>
            /*
                          六、需要遵守的规则
                          
                                    既然 Vuex 的  store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。

                                    这也意味着  Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

                                       1、最好提前在你的  store 中初始化好所有所需属性。

                                       2、当需要在对象上添加新属性时，你应该

                                                ①、使用 Vue.set(object,'newProp',123),

                                                ②、或者，一新对象替换老对象。例如，利用对象展开运算符我们可以这样写：
                                                    
                                                    state.obj ={ ...state.obj,newProp:123}

                                    ★、Mutation 必须是同步函数

                                               一条重要的原则就是要记住** mutation 必须是同步函数**
                                               
                                               我们要通过 "提交mutation" 的方式来改变状态数据，是因为我们想要更明确地追踪到状态的变化。

                                               如果是类似下面这样异步的话：

                                                  	mutations: {
                                                        someMutation (state) {
                                                            api.callAsyncMethod(() => {
                                                                state.count++
                                                            })
                                                        }
                                                    }

                                              我们就不知道什么时候状态发生变化，所以也就无法追踪了，这与  mutation 的设计初心相孛，所以强制规定它必须是同步函数。
                    */
        </script>
    </body>
</html>